<!DOCTYPE html>
<html lang="en">
    <head>
        <title>维修看板</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="../css/global.css" rel="stylesheet">
        <link rel="stylesheet" href="../css/iconfont/iconfont.css">
        <link rel="stylesheet" href="../css/patrolKanban.css">
        <script src="../js/vue.js"></script>
        <script src="../js/axios.js"></script>
        <script src="../js/echarts.js"></script>
        <link rel="stylesheet" href="../css/nutui/dist/nutui.css">
        <script src="../css/nutui/dist/nutui.js"></script>
    </head>
    <body>
        <div id="app">
            <div class="app_tabDom">
                <div class="app_header">
                    <div class="app_headerLeft" @click="back">
                        <span class="iconfont icon-arrow-left-bold"></span>
                    </div>
                    <div class="app_headerTitle">巡检看板</div>
                </div>
                <div class="app_tabs">
                    <div class="left">近一年<span class="iconfont icon-arrow-down-bold"></span></div>
                    <div class="right">全部区域<span class="iconfont icon-arrow-down-bold"></span></div>
                </div>
            </div>
            <div class="app_mainList1">
                <div class="title">
                    <div class="num">590</div>
                    <div class="txt">任务总量(个)</div>
                </div>
                <div id="main" class="app_mainList1Echarts"></div>
                <nut-row>
                    <nut-col :span="12">
                        <div class="rowNum">534</div>
                        <div class="rowTxt">已完成</div>
                    </nut-col>
                    <nut-col :span="12">
                        <div class="rowNum">34</div>
                        <div class="rowTxt">待完成</div>
                    </nut-col>
                </nut-row>
            </div>
            <div class="app_mainList3_1">
                <div class="app_mainListTitle">泵房维修量分析</div>
                <nut-row class="app_mainList3_1TableTh">
                    <nut-col :span="8">
                        <div class="flex-content">泵房名称</div>
                    </nut-col>
                    <nut-col :span="4">
                        <div class="flex-content">总数</div>
                    </nut-col>
                    <nut-col :span="4">
                        <div class="flex-content">完成</div>
                    </nut-col>
                    <nut-col :span="4">
                        <div class="flex-content">待完成</div>
                    </nut-col>
                    <nut-col :span="4">
                        <div class="flex-content">漏检</div>
                    </nut-col>
                </nut-row>
                <nut-row class="app_mainList3_1TableTd" v-for="(item,index) in tableList" :key="index">
                    <nut-col :span="8">
                        <div class="flex-content"><span :class="'box'+(index+1)">{{index+1}}</span>{{item.name}}</div>
                    </nut-col>
                    <nut-col :span="4">
                        <div class="flex-content">{{item.total}}</div>
                    </nut-col>
                    <nut-col :span="4">
                        <div class="flex-content">{{item.complete}}</div>
                    </nut-col>
                    <nut-col :span="4">
                        <div class="flex-content">{{item.toDo}}</div>
                    </nut-col>
                    <nut-col :span="4">
                        <div class="flex-content">{{item.Undetected}}</div>
                    </nut-col>
                </nut-row>
            </div>
            <div class="app_mainList3">
                <div class="app_mainListTitle">巡检人员统计</div>
                <nut-row class="app_mainList3TableTh">
                    <nut-col :span="8">
                        <div class="flex-content">姓名</div>
                    </nut-col>
                    <nut-col :span="4">
                        <div class="flex-content">总数</div>
                    </nut-col>
                    <nut-col :span="4">
                        <div class="flex-content">完成</div>
                    </nut-col>
                    <nut-col :span="4">
                        <div class="flex-content">待完成</div>
                    </nut-col>
                    <nut-col :span="4">
                        <div class="flex-content">漏检</div>
                    </nut-col>
                </nut-row>
                <nut-row class="app_mainList3TableTd" v-for="(item,index) in tableData" :key="index">
                    <nut-col :span="8">
                        <div class="flex-content"><span :class="'box'+(index+1)">{{index+1}}</span>{{item.name}}</div>
                    </nut-col>
                    <nut-col :span="4">
                        <div class="flex-content">{{item.total}}</div>
                    </nut-col>
                    <nut-col :span="4">
                        <div class="flex-content">{{item.complete}}</div>
                    </nut-col>
                    <nut-col :span="4">
                        <div class="flex-content">{{item.toDo}}</div>
                    </nut-col>
                    <nut-col :span="4">
                        <div class="flex-content">{{item.Undetected}}</div>
                    </nut-col>
                </nut-row>
            </div>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    tableData: [
                        {no: 1,name: '张志',total: '49',complete: '30',toDo: '42',Undetected: '0'},
                        {no: 2,name: '李维',total: '22',complete: '22',toDo: '0',Undetected: '0'},
                        {no: 3,name: '孙志浩',total: '10',complete: '8',toDo: '2',Undetected: '0'},
                        {no: 4,name: '张仲敬',total: '10',complete: '8',toDo: '2',Undetected: '0'},
                        {no: 5,name: '张三',total: '49',complete: '30',toDo: '42',Undetected: '0'},
                    ],
                    tableList: [
                        {no: 1,name: '南苑小区1#',total: '49',complete: '30',toDo: '42',Undetected: '0'},
                        {no: 2,name: '蔷薇国际一期',total: '22',complete: '22',toDo: '0',Undetected: '0'},
                        {no: 3,name: '才子佳人小区',total: '10',complete: '8',toDo: '2',Undetected: '0'},
                        {no: 4,name: '才子佳人小区',total: '10',complete: '8',toDo: '2',Undetected: '0'},
                        {no: 5,name: '南苑小区2#',total: '49',complete: '30',toDo: '42',Undetected: '0'},
                        {no: 5,name: '南苑小区2#',total: '49',complete: '30',toDo: '42',Undetected: '0'},
                        {no: 5,name: '南苑小区2#',total: '49',complete: '30',toDo: '42',Undetected: '0'},
                        {no: 5,name: '南苑小区2#',total: '49',complete: '30',toDo: '42',Undetected: '0'},
                        {no: 5,name: '南苑小区2#',total: '49',complete: '30',toDo: '42',Undetected: '0'},
                        {no: 5,name: '南苑小区2#',total: '49',complete: '30',toDo: '42',Undetected: '0'},
                        {no: 5,name: '南苑小区2#',total: '49',complete: '30',toDo: '42',Undetected: '0'},
                        {no: 5,name: '南苑小区2#',total: '49',complete: '30',toDo: '42',Undetected: '0'},
                        {no: 5,name: '南苑小区2#',total: '49',complete: '30',toDo: '42',Undetected: '0'},
                    ]
                },
                mounted() {
                    this.getEchartsDom()
                },
                methods: {
                    back() {
                        window.history.go(-1)
                    },
                    getEchartsDom() {
                        var chartDom = document.getElementById('main');
                        var myChart = echarts.init(chartDom);
                        const chartObserver = new ResizeObserver(() => {
                            myChart.resize()
                        })
                        chartObserver.observe(chartDom)
                        var option;
                        option = {
                            title: {
                                text: '巡检任务概括',
                                top: 12,
                                left: 12,
                                textStyle: {
                                    fontSize: 14,
                                    fontWeight: 400,
                                    color: '#5C5C5C'
                                }
                            },
                            tooltip: {
                                trigger: 'item'
                            },
                            // legend: {
                            //     bottom: '0',
                            //     left: 'center'
                            // },
                            series: [
                                {
                                    type: 'pie',
                                    radius: ['70%', '84%'],
                                    color:['#3967FD','#FF9E37'],
                                    avoidLabelOverlap: false,
                                    label: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        label: {
                                            show: false,
                                            fontSize: '40',
                                            fontWeight: 'bold'
                                        }
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    data: [
                                        { value: 534, name: '已完成' },
                                        { value: 35, name: '待完成' }
                                    ]
                                }
                            ]
                        };
                        option && myChart.setOption(option);
                    }
                }
            })
        </script>
    </body>
</html>